<!-- 机构编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="620"
    v-model="visible"
    :title="actionConfigs[action].title"
    @open="handleOpen"
    @close="handleCancel"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="currentRules"
      label-width="80px"
      @submit.prevent=""
    >
      <el-row :gutter="16">
        <el-col :sm="12" :xs="24">
          <el-form-item label="上级机构" prop="parent_id">
            <organization-select
              v-model="form.parent_id"
              placeholder="请选择上级机构"
              :organization-data="organizationData"
            />
          </el-form-item>
          <el-form-item label="机构名称" prop="organization_name">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.organization_name"
              placeholder="请输入机构名称"
            />
          </el-form-item>
          <el-form-item label="机构全称" prop="organization_full_name">
            <el-input
              clearable
              :maxlength="100"
              v-model="form.organization_full_name"
              placeholder="请输入机构全称"
            />
          </el-form-item>
          <el-form-item label="机构代码">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.organization_code"
              placeholder="请输入机构代码"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="机构类型" prop="organization_type">
            <dict-data
              code="organization_type"
              v-model="form.organization_type"
              placeholder="请选择机构类型"
            />
          </el-form-item>
          <el-form-item label="排序号" prop="sort_number">
            <el-input-number
              :min="0"
              :max="99999"
              v-model="form.sort_number"
              placeholder="请输入排序号"
              controls-position="right"
              class="ele-fluid"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              :rows="3"
              type="textarea"
              :maxlength="200"
              v-model="form.comments"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ actionConfigs[action].button }}
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import OrganizationSelect from "./organization-select.vue";
import {
  addOrganization,
  updateOrganization,
  showOrganization,
} from "@/api/system/organization";
import { useFormEdit } from "@/hooks/useFormEdit";

const props = defineProps({
  /** 修改回显的数据 */
  data: Object,
  action: {
    type: String,
    default: "edit",
    validator: (value) => ["add", "edit", "view"].includes(value),
  },
  /** 添加时机构id */
  organizationId: Number, // 接收parent_id
  /** 指定机构下拉数据 */
  organizationData: Array,
});

const emit = defineEmits(["update:modelValue", "done", "open"]);

const actionConfigs = {
  add: {
    title: "新增机构",
    button: "新增",
    api: addOrganization,
    showFields: [
      "parent_id",
      "organization_name",
      "organization_full_name",
      "organization_code",
      "organization_type",
      "leader_id",
      "sort_number",
      "comments",
    ],
    disabledFields: [],
    rules: {
      organization_name: [
        {
          required: true,
          message: "请输入机构名称",
          type: "string",
          trigger: "blur",
        },
      ],
      organization_full_name: [
        {
          required: true,
          message: "请输入机构全称",
          type: "string",
          trigger: "blur",
        },
      ],
      organization_type: [
        {
          required: true,
          message: "请选择机构类型",
          type: "number",
          trigger: "change",
        },
      ],
      sort_number: [
        {
          required: true,
          message: "请输入排序号",
          type: "number",
          trigger: "blur",
        },
      ],
    },
    beforeOpen: ({ type, formData }) => {
      // 打开前的操作，可以修改表单数据
      formData.parent_id = props.organizationId; // 使用props.organizationId初始化
      console.log("打开前的数据:", formData);
      return { type, formData }; // 必须返回处理后的表单数据
    },
    afterOpen: async (form, formData) => {
      assignFields({ ...form, ...formData });
      return form;
    },
    beforeSubmit: async ({ type, formData }) => {
      // 提交前的操作，可以修改表单数据
      console.log("提交数据:", formData);
      // if (!formData.requiredField) {
      //   return Promise.reject(new Error("缺少必填字段")); // 返回rejected Promise中断流程
      // }
      return { type, formData }; // 必须返回处理后的表单数据
    },
  },
  edit: {
    title: "修改机构",
    button: "修改",
    api: updateOrganization, // 补充edit的API
    showFields: [
      "parent_id",
      "organization_name",
      "organization_full_name",
      "organization_code",
      "organization_type",
      "leader_id",
      "sort_number",
      "comments",
    ],
    disabledFields: [],
    rules: {
      organization_name: [
        {
          required: true,
          message: "请输入机构名称",
          type: "string",
          trigger: "blur",
        },
      ],
      organization_full_name: [
        {
          required: true,
          message: "请输入机构全称",
          type: "string",
          trigger: "blur",
        },
      ],
      organization_type: [
        {
          required: true,
          message: "请选择机构类型",
          type: "number",
          trigger: "change",
        },
      ],
      sort_number: [
        {
          required: true,
          message: "请输入排序号",
          type: "number",
          trigger: "blur",
        },
      ],
    },
  },
  view: {
    title: "查看机构",
    button: "确定",
    // api: showDictionaryData, // 补充view的API
    showFields: [
      "parent_id",
      "organization_name",
      "organization_full_name",
      "organization_code",
      "organization_type",
      "leader_id",
      "sort_number",
      "comments",
    ],
    disabledFields: [
      "parent_id",
      "organization_name",
      "organization_full_name",
      "organization_code",
      "organization_type",
      "leader_id",
      "sort_number",
      "comments",
    ],
    rules: {},
  },
};
console.log("organization_id", props.organization_id);

const {
  form,
  formRef,
  visible,
  loading,
  handleOpen,
  handleSubmit,
  currentRules,
  handleCancel,
  assignFields,
} = useFormEdit(props, emit, {
  actionConfigs,
  formFields: {
    organization_id: void 0,
    parent_id: props.organizationId || undefined, // 使用props.organizationId初始化
    organization_name: "",
    organization_full_name: "",
    organization_code: "",
    organization_type: void 0,
    leader_id: void 0,
    sort_number: void 0,
    comments: "",
  },
  detailApi: showOrganization,
  idField: "organization_id",
});
</script>
